<style>
  .icon {
    height: 36px;
    width: 36px;
  }

  .icon.select {
    border: 2px solid rgba(59, 130, 246);
    border-radius: 15px;
  }
</style>
<template>
  <div>
    <Head title="新增模版" />
    <h1 class="mb-8 text-3xl font-bold">
      <Link class="text-indigo-400 hover:text-indigo-600" href="/contacts">模版</Link>
      <span class="text-indigo-400 font-medium">/</span>新增
    </h1>
    <div class="flex">
      <div class="w-3/4 bg-white rounded-md shadow overflow-hidden">
        <form @submit.prevent="store">
          <div class="flex flex-wrap -mb-8 -mr-6 p-8">
            <text-input v-model="form.title" :error="form.errors.title" class="pb-8 pr-6 w-full lg:w-1/1" label="标题" />

            <textarea-input v-model="form.desc" :error="form.errors.desc" class="pb-8 pr-6 w-full lg:w-1/1" label="描述"></textarea-input>

            <input type="hidden" v-model="form.icon" name="icon" />

            <label class="form-label">选择图标:</label>
            <div class="flex flex-wrap -ml-2" >
              <img :class="selectIconIndex == index ? 'select': '' " @click="selectIcon(index)" class="cursor-pointer icon my-2 mx-2" v-for="(icon, index) in icons" :src='icon' />
            </div>
            <textarea-input v-if="form.icon_type == 'svg' " v-model="form.icon" :error="form.errors.icon" class="pb-8 pr-6 w-full lg:w-1/1" label="SVG信息"></textarea-input>

          </div>

          <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
            <loading-button :loading="form.processing" class="btn-indigo" type="submit">创 建</loading-button>
          </div>
        </form>

      </div>
        
      <div class="w-1/4 ml-8 -mr-6 p-8 bg-white rounded-md ">
        <h3 class="font-bold">Q:怎么添加自定义的提问Prompt</h3>
        <div class="mt-4">A:AI人工智能系统回答问题，非常依赖于提问者给出的上下文信息，因为只有这样，它才能更好的结合语境来分析你的意图。</div>
        <div class="mt-4">举个例子：我想让你充当一个小红书的标题生成器，我通过逗号输入关键词，你将回复花式标题，并前每一个标题前加上表情。</div>
        <div class="mt-4">当你把这个添加成模版之后，下一次你只需要选择这个模版，然后输入你下面要让AI解释的小红书标题信息即可，无需每次都输入大量的文本。</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Head, Link } from '@inertiajs/inertia-vue3'
import Layout from '@/Shared/Layout'
import TextInput from '@/Shared/TextInput'
import TextareaInput from '@/Shared/TextareaInput'
import SelectInput from '@/Shared/SelectInput'
import LoadingButton from '@/Shared/LoadingButton'

export default {
  components: {
    Head,
    Link,
    LoadingButton,
    SelectInput,
    TextInput,
    TextareaInput,
  },
  layout: Layout,
  props: {
    prompt: Array,
  },
  remember: 'form',
  data() {
    return {
      icons:[],
      selectedIcon: "/img/icon/icon1.png",
      selectIconIndex: 0,
      form: this.$inertia.form({
        title: '',
        desc: '',
        icon_type: 'png',
        icon: ''
      }),
    }
  },
  created: function() {
    for(let i = 1; i <= 68; i++) {
      this.icons.push("/img/icon/icon" + i + ".png");
    }
  },
  methods: {
    selectIcon(index) {
      this.selectIconIndex = index;
      this.form.icon = "/img/icon/icon" + index + ".png"
    },
    store() {
      this.form.post('/prompt')
    },
  },
}
</script>
